<script lang='ts' setup>
	import {
		theme
	} from '@/store/module/theme'
	import {
		ref
	} from 'vue'

	const swiperList = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	])

	const lastUse = ref([{
			title: '生活记录',
			icon: '/static/iconfont/shenhuo.png',
			url: ''
		},
		{
			title: '日历',
			icon: '/static/iconfont/rili.png',
			url: ''
		},
		{
			title: '打卡',
			icon: '/static/iconfont/daka.png',
			url: ''
		},
		{
			title: '记账本',
			icon: '/static/iconfont/jizhangben.png',
			url: ''
		}
	]);
	const useList = ref([
		[{
				title: '生活记录',
				icon: '/static/iconfont/shenhuo.png',
				url: ''
			},
			{
				title: '日历',
				icon: '/static/iconfont/rili.png',
				url: ''
			},
			{
				title: '打卡',
				icon: '/static/iconfont/daka.png',
				url: ''
			},
			{
				title: '记账本',
				icon: '/static/iconfont/jizhangben.png',
				url: ''
			}
		]
	]);
</script>


<template>
	<view :class="theme()" class="w-full min-h-[100vh]" :style="{background:'var(--Gradient-color)'}">
		<view class="py-[20rpx] bg-[transparent]">
			<u-swiper class="bg-[transparent]" :list="swiperList" previousMargin="35" nextMargin="35" circular
				:autoplay="true" radius="5" bgColor="#ffffff"></u-swiper>
		</view>
		<view class="last px-[20rpx]">
			<view class='text-[16px] font-bold text-[var(--text-color)] my-[20rpx]'>最近常用</view>
			<view class="last_use_list w-full h-auto grid grid-cols-2 gap-2">
				<view class="h-[140rpx] bg-[#f2f2f2] rounded-[12rpx] flex justify-center items-center"
					v-for="i in lastUse" :key="i.title">
					{{i.title}}
				</view>
			</view>
		</view>
		<!-- list -->
		<view class="list_cell">
			<u-cell-group class="mt-[20rpx] bg-[var(--bg-color)]" v-for="(i,idx) in useList" :key="idx">
				<template v-for="(item,index) in i " :key="index">
					<u-cell :title="item.title" clickable :rightIconStyle="{
							color:'var(--text-color)'
						}" :titleStyle="{color:'var(--text-color)'
							
						}" arrow-direction="right" isLink :url="item.url">
						<template #icon>
							<image :src="item.icon" class="w-[40rpx] h-[40rpx] mr-[20rpx]" mode=""></image>
						</template>
					</u-cell>
				</template>
			</u-cell-group>
		</view>

	</view>

</template>